<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">

    <!-- body 最后 -->
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>

    <!-- 如果使用了某些拓展插件还需要额外的JS -->
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/swiper.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/city-picker.min.js"></script>
</head>
<style type="text/css">
    .main{
        width: 100%;
        height: 100vh;
        text-align: center;
        background: #5bc0de;

    }
    .top{
        /*background-image: url('static/images/mobile/bsd.jpg');*/
        width: 100%;
        height: 30%;
        /*background: #1a2226;*/
    }
    .list{
        height: 55% ;
        width: 100%;
        box-sizing: border-box;

    }
    .bot{

    }
    .sy{
        color: #2aa18d;
    }
    .title_head{
        width: 100%;
        height: 10%;
    }
</style>
<body>

<div class="main">
    <header class="bar bar-nav">
        <h2 class="title">共享样衣</h2>
    </header>


    <div class="top">
        <img src="static/images/mobile/bsd.jpg" alt="" height="100%" width="100%">
    </div>
    <div class="weui-grids list" >

        <a href="${ctxPath}/clothes/borrow" class="weui-grid js_grid">
            <div class="weui-grid__icon">
                <img src="static/images/mobile/jieyong.png" alt="">
            </div>
            <p class="weui-grid__label">
                样衣借用
            </p>
        </a>
        <a href="" class="weui-grid js_grid">
            <div class="weui-grid__icon">
                <img src="static/images/mobile/gh.png" alt="">
            </div>
            <p class="weui-grid__label">
                样衣归还
            </p>
        </a>
        <a href="" class="weui-grid js_grid">
            <div class="weui-grid__icon">
                <img src="static/images/mobile/ghnote.png" alt="">
            </div>
            <p class="weui-grid__label">
                归还记录
            </p>
        </a>
        <a href="" class="weui-grid js_grid">
            <div class="weui-grid__icon">
                <img src="static/images/mobile/upload.png" alt="">
            </div>
            <p class="weui-grid__label">
                图片上传
            </p>
        </a>
        <a href="" class="weui-grid js_grid">
            <div class="weui-grid__icon">
                <img src="static/images/mobile/daynote.png" alt="">
            </div>
            <p class="weui-grid__label">
                日志
            </p>
        </a>
        <a href="" class="weui-grid js_grid">
            <div class="weui-grid__icon">
                <img src="static/images/mobile/waicai.png" alt="">
            </div>
            <p class="weui-grid__label">
                采风图片浏览
            </p>
        </a>
        <a href="" class="weui-grid js_grid">
            <div class="weui-grid__icon">

                <img src="static/images/mobile/yangyi.png" alt="">
            </div>
            <p class="weui-grid__label">
                样衣图片浏览
            </p>
        </a>
        <a href="" class="weui-grid js_grid">
            <div class="weui-grid__icon">
                <img src="static/images/mobile/more.png" alt="">
            </div>
            <p class="weui-grid__label">
                更多
            </p>
        </a>


    </div>


        <div class="weui-tabbar bot">
            <a href="javascript:;" class="weui-tabbar__item">

                <div class="weui-tabbar__icon">
                    <img src="static/images/mobile/sy.png" alt="">
                </div>
                <p class="weui-tabbar__label sy">首页</p>
            </a>
            <a href="javascript:;" class="weui-tabbar__item">
                <div class="weui-tabbar__icon">
                    <img src="static/images/mobile/xiaoxi.png" alt="">
                </div>
                <p class="weui-tabbar__label">消息</p>
            </a>

            <a href="javascript:;" class="weui-tabbar__item">
                <div class="weui-tabbar__icon">
                    <img src="static/images/mobile/wo.png" alt="">
                </div>
                <p class="weui-tabbar__label">我</p>
            </a>
        </div>
    </div>
</div>


</body>
</html>